<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Go Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>围棋练习</h1>
    <div class="controls">
        <div class="player-selection">
            <span>选择模式:</span>
            <button id="freeMode">自由模式</button>
            <button id="playAsBlack">执黑对战</button>
            <button id="playAsWhite">执白对战</button>
            <button id="aiVsAi">AI对战</button>
        </div>
        <div class="ai-level-selection">
            <span>AI难度:</span>
            <button id="aiEasy">初级</button>
            <button id="aiMedium" class="selected">中级</button>
            <button id="aiHard">高级</button>
        </div>
        <div class="ai-visualization">
            <label>
                <input type="checkbox" id="showHeatmap">
                显示 AI 思考热图
            </label>
            <label>
                <input type="checkbox" id="showSuggestions">
                显示 AI 建议 (前5)
            </label>
        </div>
        <div class="ai-controls" style="display: none;">
            <button id="startAiGame">开始</button>
            <button id="pauseAiGame">暂停</button>
            <button id="stopAiGame">停止</button>
            <span id="ai-status">就绪</span>
        </div>
        <div class="game-actions">
            <button id="saveSgf">保存棋谱 (SGF)</button>
            <label for="loadSgf" class="file-upload-label">加载棋谱 (SGF)</label>
            <input type="file" id="loadSgf" accept=".sgf" style="display: none;">
            <button id="undoMove">悔棋</button>
        </div>
    </div>
    <div id="board-container">
        <div id="board-wrapper">
            <div id="col-labels" class="labels col-labels"></div>
            <div id="row-labels" class="labels row-labels"></div>
            <div id="board"></div>
        </div>
    </div>
    <div id="territory-info" class="territory-info">
        <div class="territory-item">
            <span class="territory-label">黑方领地：</span>
            <span id="black-territory" class="territory-value">0</span>
        </div>
        <div class="territory-item">
            <span class="territory-label">白方领地：</span>
            <span id="white-territory" class="territory-value">0</span>
        </div>
        <div class="territory-item">
            <span class="territory-label">中立区域：</span>
            <span id="neutral-territory" class="territory-value neutral">0</span>
        </div>
    </div>
    <div id="capture-info" class="capture-info">
        <div class="capture-item">
            <span class="capture-label">黑方提子：</span>
            <span id="black-captured" class="capture-value">0</span>
        </div>
        <div class="capture-item">
            <span class="capture-label">白方提子：</span>
            <span id="white-captured" class="capture-value">0</span>
        </div>
    </div>
    <div class="replay-controls" style="display: none;">
        <button id="replayStart">|&lt;</button>
        <button id="replayPrev">&lt;</button>
        <span id="move-counter">0 / 0</span>
        <button id="replayNext">&gt;</button>
        <button id="replayEnd">&gt;|</button>
    </div>
    <div id="comment-box" class="comment-box" style="display: none;">
        <p id="comment-text"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>
